<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>作品详情</title>
		<link rel="stylesheet" href="../css/common.css">
		<link rel="stylesheet" href="../css/page.css">
		<link rel="stylesheet" href="../css/swiper.min.css">
		<script src="../js/swiper.min.js"></script>
		<script src="../js/jquery-3.2.1.min.js"></script>
		<script src="../js/public.js"></script>
		<script src="../js/media.js"></script>
		<script src="../js/common.js"></script>
		<style>
			.bd-0 {
				display: none;
			}
			.active {
				display: block;
			}
			.red-box {
				z-index: 9;
				width: 2.7rem;
				height: 1.89rem;
				background: #fff;
				border-radius: 6px;
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				border-radius: 6px;
			}
			.red-box h2 {
				font-size: .16rem;
				color: rgba(18, 18, 18, 0.9);
				text-align: center;
				margin-top: .12rem;
				margin-bottom: .16rem;
			}
			.red-box ul {
				width: 2.09rem;
				display: block;
				margin: 0 auto;
				border-radius: 6px;
			}
			.red-box ul li {
				float: left;
				width: .68rem;
				line-height: .36rem;
				border: none;
				text-align: center;
				border: 0.01rem solid #FFF;
				box-sizing: border-box;
			}
			
			.red-box ul li img {
				width: .1rem;
				height: .12rem;
				margin-right: .03rem;
			}
			.red-box .button-wechart {
				border-radius: 6px;
				display: block;
				border: 1px solid rgba(0, 183, 0, 1);
				text-align: center;
				line-height: .3rem;
				width: .81rem;
				background: url('../img/微信支付 (1)@2x.png') no-repeat .12rem;
				background-size: .11rem .1rem;
				color: rgba(0, 183, 0, 1);
				font-size: .1rem;
				/*box-sizing: border-box;*/
				padding-left: .1rem;
				margin: 0.16rem auto 0;
			}
			.x {
				font-size: .1rem;
				color: rgba(18, 18, 18, 0.25);
				position: absolute;
				top: .11rem;
				right: .15rem;
			}
			.section {
				background: #fff;
				border-bottom: solid 1px #ddd;
			}
			.ins {
				width: 85%;
				float: left;
				border: none;
				line-height: .4rem;
				padding: 0 .2rem;
				box-sizing: border-box;
			}
			.imgs-div {
				float: right;
				width: 15%;
				text-align: center;
				line-height: .4rem;
			}
			.look_author {
				width: 0.6rem!important;
			}
			.moneybox {
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.2);
				z-index: 222222;
			}
			.shaib_img {
				height: 2.5rem!important
			}
			.addclass1 {
				background: url('../img/点赞 01@2x.png') no-repat left center;
				background-size: 0.12rem;
			}
			.addclass2 {
				background: url('../img/zanno.png') no-repat left center!important;
				background-size: 0.12rem;
			}
			.dianz {
				width: .12rem;
				height: .12rem;
			}
			.dashang_num,
			.dashang_money {
				color: red!important;
			}
			.swiper-container {
			    width: 100%;
			    height: 3.75rem;
			}
			#index_banner{
				width: 100%;
			    height: 3.75rem;
			}
			.swi-img{
				width: 100%;
				height: 3.75rem;
			}
			.dashang_money{
				margin-bottom: 0.1rem;
			}
			.red-box ul li.this_money{
				border: 0.01rem solid #5F3104;
			}
			.Sunbird-details-page{
				height: initial!important;
			}
			.beizhu{
				color: #999;
			    text-align: center;
			    padding-bottom: 0.2rem;
			}
		</style>
	</head>
	<body>
		<div class="Sunbird-details-page bc-gray" style="min-height: auto;">
			<div class="swiper-container"><!---->
                <div class="swiper-wrapper" id="index_banner">
                    
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="pro_details" style="padding: 0.14rem 0.1rem;font-size: 0.14rem;color: #121212;">
                		<!--{{datas.produce_describe}}-->
            		<p class="produce_info">【作品名称】</p>
            		<p class="produce_info">【泥料】</p>
            		<p class="produce_info">【尺寸】</p>
            		<p class="produce_info">【制作工艺】</p>
            		<p class="produce_info">【制作时间】</p>
            		<p class="produce_info">【作品描述】</p>
            </div>
			<ul class="imgsdisplay">
				<li style='display:none'>
					<img class="shaib_img" src="" alt="">
					<p class="des" id="miaoshu"></p>
				</li>
			</ul>
			<div class="box dashang">
				<img src="../img/红包@2x.png" alt="">
				<p class="t2">打赏</p>
			</div>
			<p class="t3 dashang_num"></p>
			<p class="t3 dashang_money"></p>
			<p class="beizhu">所有打赏的金额都会用于公益事业</p>
		</div>
		<div class="moneybox" style="display:none;">
			<div class="red-box">
				<h2>打赏金额</h2>
				<ul class='clearfix dashang'>
					<li><img src="../img/红包@2x.png" alt="">0.1</li>
					<li><img src="../img/红包@2x.png" alt="">1</li>
					<li><img src="../img/红包@2x.png" alt="">2</li>
					<li><img src="../img/红包@2x.png" alt="">5</li>
					<li><img src="../img/红包@2x.png" alt="">10</li>
					<li><img src="../img/红包@2x.png" alt="">20</li>
				</ul>
				<span class="button-wechart">微信支付</span>
				<span class="x"><img src="../img/payclose.png" alt="" style="width:0.15rem;height:0.15rem;"/></span>
			</div>
		</div>
		<!--灰色浮层-->
		<div class="mask" style="background: rgba(50,50,50,0.5);display:none;z-index:2;top:0.44rem;"></div>
		<script>
			var production_id = getQueryString('production_id');//作品的ID
			var give_user = ''; //被打赏人的userid
			var shaiId = ''; //晒的宝贝的id
			var returnVal = {
				shareTitle: '', //分享的title
				shareLink: '', //分享的链接
				shareImgurl: '', //分享的图片
			}; //分享需要发送的数据
			$(function() {
				$.ajax({
					url: base_url + "ZITAOHUI/getProductionDetails",
					data: JSON.stringify({
						production_id:production_id
					}),
					type: "post",
					dataType: "json",
					contentType: "application/json;charset=UTF-8;",
					success: function(data) {
						if(data.code == 1) {
							var _d = data.extend.data.production_slideshow;
							$.each(_d, function(k, v) {
								$("#index_banner").append('<div class="swiper-slide"><img  src=' + v.production_img_url + ' class="swi-img"></div>');
							})
							var swiper = new Swiper('.swiper-container', {
								loop: true,
								autoplay: 5000,
								observer: true, //
								observeParents: true, //
								autoplayDisableOnInteraction: false,
								pagination: '.swiper-pagination'
							});
							$('.produce_info').eq(0).html("【作品名称】"+ data.extend.data.production_name);
							$('.produce_info').eq(1).text("【泥料】" + data.extend.data.production_pug);
							$('.produce_info').eq(2).text("【尺寸】" + data.extend.data.production_size);
							//$('.produce_info').eq(4).text("【备注】" + data.extend.data.production_remark);
							$('.produce_info').eq(3).text("【制作工艺】"+ data.extend.data.production_technology);
							$('.produce_info').eq(4).text("【制作时间】"+ data.extend.data.production_remark);
							$('.produce_info').eq(5).html("【作品描述】"+ data.extend.data.production_presentation);
							
							var money = (data.extend.data.sum_total_fee/100).toFixed(2);
							$(".dashang_money").text(money+"元");
							$(".dashang_num").text(data.extend.data.reward_num+"人");
						}else{
							alert('网络错误');
						}
					}
				})
				//sendAjax();
				function sendAjax() {
					$.ajax({
						url: base_url + 'ZITAOHUI/sharebioMsg',
						data: {
							//sharBioid: sharBioid,
							userId: sessionStorage.getItem("uid")
						},
						success: function(data) {
							console.log(data);
							returnVal.shareTitle = data.extend.list.discribe;
							returnVal.shareLink = window.location.href;
							returnVal.shareImgurl = data.extend.list.userUpImage.split(',')[0];
							let all_data = data.extend.list;
							// 转化时间戳
							let time = new Date(all_data.add_time);
							$('h1').html(all_data.discribe)
							$('#username').html(all_data.userNikeName);
							for(var i = 0; i < all_data.userUpImage.split(',').length; i++) {
								var clone = $('.imgsdisplay li').eq(0).clone(true);
								clone.find('img').attr('src', all_data.userUpImage.split(',')[i]);
								clone.appendTo($('.imgsdisplay')).show()
							};
							$('.imgsdisplay li').eq(all_data.userUpImage.split(',').length).find('#miaoshu').html(all_data.content)
							$("#readingQuantity").text(all_data.readingQuantity); //阅读数
							$('.add_good').text(all_data.goodNum); //点赞数量
							$('.dashang_num').text('已有' + all_data.people_num + '人打赏'); //打赏人数
							$('.dashang_money').text('共打赏' + (all_data.sum_total_fee / 100).toFixed(2) + '元'); //打赏金额
							if(all_data.is_like == 1) { //判断是否点赞
								$('.dianz').attr('src', '../img/点赞 01@2x.png')
							} else if(all_data.is_like == 0) {
								$('.dianz').attr('src', '../img/zanno.png')
							};
							give_user = all_data.userId; //被打赏人的userid
							shaiId = all_data.id; //晒宝的id
						},
						error: function() {

						}
					});
				};			
			});

			$('.dashang').click(function() {
				$('.moneybox').css({
					'display': 'block'
				});
				$('body').css('overflow', 'hidden'); //禁止滚动
			});
			$('.x').click(function() {
				$('.moneybox').css('display', 'none');
				$('body').css('overflow', 'visible');
			});
			
			var appId = "";
			var prepayId = "";
			var timeStamp = "";
			var nonceStr = "";
			var paySign = "";
			var signType = "";
			$('.dashang li').click(function() {//点击金额显示框
				$(this).addClass('this_money').siblings().removeClass('this_money');
				wxPay($(this).text());
				
			});
			$('.button-wechart').click(function(){
				if($('.this_money').length==0){
					alert('请选择一个打赏金额');
				}else if($('.this_money').length==1){
					var price = $('.this_money').text();
					wxPay(price);
				}
			})
			function wxPay(price) { //微信支付
				$.ajax({
					url: base_url + "ZITAOHUI/wexinpay",
					type: "post",
					data: {
						total_fee: price * 100,
						userId: sessionStorage.getItem("uid"),
						give_userId: give_user,
						id: production_id,
						value: 10
					},
					dataType: "json",
					success: function(data) {
						if(data.code == 1) {
							console.log(data);
							var d = data.extend.data;
							appId = d.appId;
							prepayId = d.package;
							timeStamp = d.timeStamp;
							nonceStr = d.nonceStr;
							paySign = d.paySign;
							signType = d.signType;
							onBridgeReady();
						} else {
							alert("请求失败，暂无法支付");
						}
					},
					error: function(data) {
						alert("地址失效");
					}

				})
			};
			function onBridgeReady() {
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": appId, //公众号名称，由商户传入
						"timeStamp": timeStamp, //时间戳，自1970年以来的秒数
						"nonceStr": nonceStr, //随机串
						"package": prepayId,
						"signType": signType, //微信签名方式：
						"paySign": paySign //微信签名
					},
					function(res) {
						console.log(res);
						if(res.err_msg == "get_brand_wcpay_request:ok") {
							alert('支付成功');
							window.location.reload(); //刷新当前页面
							// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
						} else if(res.err_msg == "get_brand_wcpay_request:cancel") {
							alert('支付失败');
							//window.location.href = "../index.html";
						} else if(res.err_msg == "get_brand_wcpay_request:fail") {
							alert('支付失败');
							//window.location.href = "../index.html";
						}
					}
				)
			};
		</script>
	</body>
</html>